<script>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import {Search} from "@element-plus/icons-vue";
export default {
  components:{
    Search
  },
  computed: {
    Search() {
      return Search
    }
  },
  data() {
    return {
      formLabelWidth :'140px',       //新增学生信息对象
      activeIndex: 1,
      selectedRows: [],
      queryFrm:{                //根据商品姓名和价格查询
        goodsname:null,
        goodsprice:null
      },//
      //商品数据
      GoodsData:[]
    }
  },
  methods: {
    handleClick() {},
    btnDel(goods_id){
          console.log(goods_id);
          this.$http.get("http://localhost:8080/goods/del/"+goods_id).then((res)=>{
            console.log(res.data);
            if(res.data == 1){
                console.log("删除成功!");
                ElMessage({
                       message: '删除成功!',
                       type: 'success',
                    })
                 this.LoadGoodsData()
            }else{
                ElMessage({
                       message: '删除失败!',
                       type: 'warning',
                    })
                   console.log("删除失败!");

                  }
          }).catch ((err)=>{})
         },
          // onSubmit(){
          //   console.log(this.queryFrm);
          //   this.LoadStuData()
          // },  
    btnShowUpdate(goodsinfo) {
      console.log(goodsinfo);
    },
    onSubmit() {
      console.log(this.queryFrm);
      this.LoadGoodsData()
    },
  LoadGoodsData(){
          this.$http.get("http://localhost:8080/goods/querygoods",{params:{
            name:this.queryFrm.goodsname,
            goodsprice:this.queryFrm.goodsprice
            }}).then ((res)=>{
            this.GoodsData= res.data
               console.log(this.GoodsData);
            }).catch(function(err){
               console.log(err);
            })
         },
        },
  mounted(){
    this.LoadGoodsData()
  }
   
}
</script>
<template>


  <div class="card-header">
    <span>
      <h2 class="card-title">商品管理</h2>
    </span>
  </div>
  <div class="common-layout">
    <el-container>
      <!-- <el-header>
        <center>    商品管理</center>

      </el-header> -->
      <el-main>
        <el-form :inline="true" :model="queryFrm" class="demo-form-inline">
          <el-form-item label="商品名称">
            <el-input v-model="queryFrm.goodsname" placeholder="请输入商品名称" clearable />
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="queryFrm.goodsprice" placeholder="请输入商品价格" clearable />
          </el-form-item>
         
  
            <el-form-item>
              <el-button default type="primary" :icon="Search" @click="onSubmit">搜索</el-button>
            </el-form-item>
      
      
        </el-form>

        <el-table
            ref="multipleTableRef"
            :data="GoodsData"
            style="width: 100%"
        >
          <el-table-column property="goods_id" label="商品ID" width="120" />
          <el-table-column property="goods_name" label="商品名称" width="120" />
          <el-table-column property="goods_price" label="商品价格" show-overflow-tooltip />
          <el-table-column property="goods_stock" label="商品库存" width="120" />
          <el-table-column property="goods_sale" label="商品销量" width="120" />
          <el-table-column property="category_id" label="商品IP" width="120" />
          <el-table-column prop="goods_createtime" label="创建时间"   width="120"  />
          <el-table-column property="goods_post" label="发布时间" width="120" />
          <el-table-column fixed="right" label="操作" width="120">
            <template #default = "scope">
              <el-popconfirm
                  confirm-button-text="Yes" cancel-button-text="No"
                  icon-color="#626AEF"  title="你确定删除商品的信息吗?"@confirm="btnDel(scope.row.goods_id)">
                <template #reference>
                  <el-button   default type="danger" size="small" >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
              
            </template>

          </el-table-column>
        </el-table>
        
      </el-main>
    </el-container>
  </div>
</template>

<style>
</style>
